<template>
    <div>
        <div class="box">
           <div class="denglu">登录账户</div>
           <p>虾米—严选商城欢迎你</p>
           <van-form validate-first @failed="onFailed">
  <!-- 通过 pattern 进行正则校验 -->
  <van-field
    v-model="value1"
    name="pattern"
    placeholder="手机号码"
    :rules="[{ pattern, message: '请输入正确的手机号码' }]"
  />
  <!-- 通过 validator 进行函数校验 -->
  <van-field
    v-model="value2"
    name="validator"
    placeholder="密码"
    :rules="[{ validator, message: '请输入正确的密码' }]"
  />
  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit" @click="gotomyself()">
      登录
    </van-button>
  </div>
</van-form>
        <div class="wangji">忘记密码</div><br>
        <router-link to="/register">还没有注册？立即注册</router-link>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
             value1: '',
      value2: '',
      value3: '',
      pattern: /\d{6}/,
        }
    },
     methods: {
    // 校验函数返回 true 表示校验通过，false 表示不通过
    validator(val) {
      return /1\d{10}/.test(val);
    },
    // 异步校验函数返回 Promise
    asyncValidator(val) {
      return new Promise((resolve) => {
        Toast.loading('验证中...');

        setTimeout(() => {
          Toast.clear();
          resolve(/\d{6}/.test(val));
        }, 1000);
      });
    },
    onFailed(errorInfo) {
      console.log('failed', errorInfo);
    },
    gotomyself(){
        this.$router.push("/myself");
    }
  },
}
</script>
<style scoped>
    .box{
        width: 90%;
        height: 80vh;
        border: 1px solid rgba(128, 128, 128, 0.199);
        margin: 10px auto;
    }
    .denglu{
        color: grey;
        margin-left: 20px;
        font-size: 24px;
        margin-top: 40px;
    }
    p{
        color: rgba(128, 128, 128, 0.808);
        margin-left: 20px;
        font-size: 14px;
    }
    .wangji{
        text-align: center;
        font-size: 10px;
        color: grey;
    }
</style>